import { Line } from '@ant-design/plots';
import { useEffect, useState } from 'react';
import baseUrl from '@/config';

const MultiLineChart = () => {


  const [data, setData] = useState([]);

  useEffect(() => {
    asyncFetch();

    // 暂时取消轮训，减少流量消耗
    // // Set up a polling interval (每600s=10分钟)
    // const intervalId = setInterval(asyncFetch, 6000 * 100); // Adjust the interval as needed

    // // Clean up the interval when the component unmounts
    // return () => {
    //   clearInterval(intervalId);
    // };
  }, []);

  const asyncFetch = () => {
    fetch(
      // "https://gw.alipayobjects.com/os/antfincdn/PC3daFYjNw/column-data.json"
      baseUrl + "/sys/zoneBikeSummary/getZoneBikeMultiLine"
    )
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => {
        console.log("fetch data failed", error);
      });
  };

  const config = {
    data,
    xField: 'zone',
    yField: 'value',
    seriesField: 'type',
  };

  return <Line {...config} />;
}

export default MultiLineChart;
